<template>
  <!-- 歌手路由 -->
  <div class="singer_home">
    <LeftNav @singer-category-click="singerCategoryClick"></LeftNav>
    <RightContent
      @choice-letter-click="choiceLetterClicka"
      @singer-item-click="singerItemClick"
    ></RightContent>
  </div>
</template>

<script>
import {
  defineComponent,
  onMounted,
  reactive,
  toRefs,
  ref,
  provide,
  onActivated,
  onDeactivated,
} from "vue";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import LeftNav from "@/components/singerChild/LeftNav.vue";
import RightContent from "@/components/singerChild/RightContent.vue";
import { handleHotSinger, handleCategorySinger } from "@/network/singer/singer";
export default defineComponent({
  name: "Singer",
  components: {
    LeftNav,
    RightContent,
  },
  setup() {
    const router = useRouter();
    const store = useStore();
    let data = reactive({
      // 热门歌手请求参数
      hotSingerParams: {
        limit: 20,
        offset: 0,
      },
      // 分类歌手请求参数
      categorySingerParams: {
        limit: 20,
        offset: 0,
        initial: -1,
        type: "",
        area: "",
      },
    });
    let singers = ref([]); // 保存歌手数据
    let title = ref("热门歌手");

    // 传递给孙组件SingerItem
    provide("singers", singers);
    provide("title", title);

    onMounted(() => {
      getHotSinger(data.hotSingerParams);
    });

    onActivated(() => {
      window.onscroll = handleScroll;
    });

    onDeactivated(() => {
      window.onscroll = null;
    });

    // 处理滚动事件
    let handleScroll = () => {
      //变量scrollTop是滚动条滚动时，距离顶部的距离
      let scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop;
      //变量windowHeight是可视区的高度
      let windowHeight =
        document.documentElement.clientHeight || document.body.clientHeight;
      //变量scrollHeight是滚动条的总高度
      let scrollHeight =
        document.documentElement.scrollHeight || document.body.scrollHeight;
      //滚动条到底部的条件
      if (scrollTop + windowHeight == scrollHeight) {
        if (title.value == "热门歌手") {
          data.hotSingerParams.offset += 20;
          getHotSinger(data.hotSingerParams);
        } else {
          data.categorySingerParams.offset += 20;
          getCategorySinger(data.categorySingerParams);
        }
      }
    };

    // 获取热门歌手请求
    let getHotSinger = async (params) => {
      let res = await handleHotSinger(params);
      singers.value = [...singers.value, ...res.artists];
    };

    // 获取分类歌手请求
    let getCategorySinger = async (params) => {
      let res = await handleCategorySinger(params);
      singers.value = [...singers.value, ...res.artists];
    };

    // 处理子组件点击歌手分类的回调
    let singerCategoryClick = (category) => {
      singers.value = [];
      title.value = category.key;

      // 先处理热门歌手的请求
      if (category.type == -1) {
        data.hotSingerParams.offset = 0;
        return getHotSinger(data.hotSingerParams);
      }
      data.categorySingerParams.offset = 0;
      data.categorySingerParams.type = category.type;
      data.categorySingerParams.area = category.area;
      getCategorySinger(data.categorySingerParams);
    };

    // 子组件ChioceLetter选择字母事件
    let choiceLetterClicka = (letter) => {
      singers.value = [];
      data.categorySingerParams.offset = 0;
      let initial = letter;
      if (letter == "热门") {
        initial = -1;
      }
      if (letter == "其他") {
        initial = 0;
      }
      getCategorySinger({ ...data.categorySingerParams, initial });
    };

    // 点击展示歌手小组件的回调
    let singerItemClick = (item) => {
      store.dispatch("saveSingerDetail", item);
      router.push("/singer/detail");
    };

    return {
      ...toRefs(data),
      singerCategoryClick,
      choiceLetterClicka,
      singerItemClick,
    };
  },
});
</script>
<style scoped>
.singer_home {
  width: 100%;
  display: flex;
  background-color: #fff;
}
</style>
